﻿/* -- Copyright © Microsoft Corporation. All rights reserved. */
/* the drop-down inherits the same background color as the face plate */
select.differentSelectColor
{
    border-color: rgba(255, 224, 100, 0.8);
    border-style: solid;
    background-color: rgba(255, 224, 100, 0.8);
}

select.differentSelectColor:hover
{
    border-color: rgba(255, 224, 100, 0.87);
    background-color: rgba(255, 224, 100, 0.87);
}

select.differentSelectColor:active, select.differentSelectColor:focus
{
    border-color: rgb(255, 224, 100);
    background-color: rgb(255, 224, 100);
}

/* remove the default border and background colors of the expand button */
select.differentSelectColor::-ms-expand
{
    border-color: transparent;
    background-color: transparent;
}

select.differentSelectGroupColor
{
    background-color: transparent;
    border-color: transparent;
}


select.differentSelectGroupColor optgroup.fruits
{
    background-color: rgb(160, 164, 201);
}

select.differentSelectGroupColor optgroup.vegetables
{
    background-color: rgb(209, 237, 123);
}

/* Styling the background of the select control to be grey */
select.styledOptions {
    border: 1px solid rgb(112, 112, 112);
    background-color: rgb(192, 192, 192);
    color: rgb(33, 33, 33);
}

/* Styling the disabled select control */
select.styledOptions:disabled {
    color: rgb(64, 128, 128);
    background-color: rgb(222, 96, 222);
}

/* Styling the faceplate of the select control to be focused */
select.styledOptions:focus::-ms-value {
    color: rgb(255, 255, 255);
    background-color: rgb(145, 0, 145);
}

/* Styling the hover/pressed/active/disabled states of option tags (for select) */
select.styledOptions option:hover {
    color: rgb(33, 33, 33);
    background-color: rgb(255, 128, 255);
}

select.styledOptions option:active,
select.styledOptions option:active:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(255, 45, 255);
}

select.styledOptions option:checked:not(:active) {
    color: rgb(255, 255, 255);
    background-color: rgb(145, 0, 145);
}

select.styledOptions option:checked:hover:not(:active) {
    color: rgb(255, 255, 255);
    background-color: rgb(145, 80, 145);
}

select.styledOptions:disabled option,
select.styledOptions optgroup:disabled option,
select.styledOptions option:disabled,
select.styledOptions optgroup:disabled {
    color: rgb(64, 128, 128);
}

select.styledOptions:disabled option:checked,
select.styledOptions optgroup:disabled option:checked,
select.styledOptions option:disabled:checked {
    color: rgb(64, 128, 128);
    background-color: rgb(222, 96, 222);
}

/* remove the default border and background colors of the expand button */
select.styledOptions::-ms-expand
{
    border-color: transparent;
    background-color: transparent;
}

select.roundedCornerFacePlate
{
    background-color: rgba(205,238,229,0.8);
    border: 2px solid #ffffff;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #3bc7a1;
    padding: 4px 4px 4px 11px;
    color: #0a664d;
    font-family: Calibri, Arial, Helvetica, sans-serif;
    font-size: 16px;
}

select.roundedCornerFacePlate:hover
{
    border: 2px solid #ffffff;
    color: #24a481;
    box-shadow: 0 0 0 1px #24a481;
    background-color: rgba(205,238,229,0.4);
}

select.roundedCornerFacePlate:active
{
    background-color: rgba(205,238,229,0.2);
    border: 2px solid rgba(205,238,229,0.6);
    color: #0a664d;
}

/* remove the default border and background colors of the expand button */
select.roundedCornerFacePlate::-ms-expand
{
    border-color: transparent;
    background-color: transparent;
}
    
select.roundedCornerListBox
{
    background-color: rgba(205,238,229,0.8);
    border: 2px solid #ffffff;
    border-radius: 4px;
    box-shadow: 4 4 4 4px #3bc7a1;
    padding: 4px 4px 4px 8px;
    color: #0a664d;
    font-family: Calibri, Arial, Helvetica, sans-serif;
    font-size: 16px;
}

select.roundedCornerListBox:active, select.roundedCornerListBox:focus
{
    background-color: rgba(205,238,229,0.2);
    border: 2px solid rgba(205,238,229,0.6);
    color: #0a664d;
}

select.roundedCornerListBox:disabled
{
    background-color: rgba(205,238,229,0.1);
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(205,238,229,0.6);
    color: #3bc7a1;
}